import React from 'react'

import Texty from 'rc-texty';
import 'rc-texty/assets/index.css';
import QueueAnim from 'rc-queue-anim'


import { Tabs, Row, Col, Carousel } from 'antd';


import './solution.less';


const { TabPane } = Tabs;


export default class Solution extends React.Component {
    state = {
        activeKey: '7'
    }
    render() {
        const { activeKey } = this.state
        return (
            <div>
                <Carousel autoplay>
                    <div >
                        <p className="sotitle">严谨态度 服务社会</p>
                        <p className="sodetail">为企业提供定制化的人才解决方案 为劳动者打造科学的培训求职平台</p>
                        <img className='img-responsive' src="https://z3.ax1x.com/2021/07/19/WGxa36.png" />
                    </div>

                    {/* <div>
                        <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>3</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>4</h3>
                    </div> */}
                </Carousel>


                <div className='box1' key='1' >
                    <Tabs activeKey={activeKey} tabPosition='left' size="large">
                    <TabPane tab={<span onMouseEnter={() => { this.setState({ activeKey: "7" }) }}>灵活用工</span>} key="7">
                            <div style={{ padding: 30 }}>
                                <h1>灵活用工</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={12}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >帮助企业快速获取，甄选，雇佣及管理人才</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >减轻人力资源部门管理负担，使企业更专注于管理核心业务</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >根据企业的灵活用工需求，弹性配置人员</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>突破组织人员编制的闲置，满足因项目，季节性业务需求，生产波峰波谷等用工需求</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={12}>
                                        <div >
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WSsHOO.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane tab={<span onMouseEnter={() => {
                            this.setState({ activeKey: '1' })
                        }}>人事外包</span>} key="1">
                            <div style={{ padding: 20 }}>
                                <h1>人事外包</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={10}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >降低人力资源管理成本</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >提高人力资源管理效率</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >优化企业用工风险</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>实现企业效率最大化</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={14}>
                                        <div>
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/06/23/RnLh3d.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane tab={<span onMouseEnter={() => { this.setState({ activeKey: "2" }) }}>薪酬服务</span>} key="2">
                            <div style={{ padding: 30 }}>
                                <h1>薪酬服务</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={10}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >薪酬核算及发放,为客户提供系统化的薪资计算管理服务</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >更好的实施公司福利制度方案，建立合理的员工保险体系</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >促进个人所得税征管的科学化、精细化，不断提高征管效率和质量</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>节能环保、提高各大企业工资单发放效率，防止员工信息泄露</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={14}>
                                        <div >
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WS6SUJ.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane tab={<span onMouseEnter={() => { this.setState({ activeKey: "3" }) }}>社保代缴</span>} key="3">
                            <div style={{ padding: 30 }}>
                                <h1>社保代缴</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={10}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >网点覆盖全国 满足您不同区域不同需求</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >匠心15年专注专业安全可靠</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >专业客服团队+服务质量管控体系</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>社保代缴最低19.9元/人每月</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={14}>
                                        <div >
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WS6igx.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane tab={<span onMouseEnter={() => { this.setState({ activeKey: "4" }) }}>保险代理</span>} key="4">
                            <div style={{ padding: 30 }}>
                                <h1>保险代理</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={10}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >全方位保障</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >保险产品丰富</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >品牌安全可靠</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>性价比高</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={14}>
                                        <div >
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WSsBYn.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane tab={<span onMouseEnter={() => { this.setState({ activeKey: "5" }) }}>招聘外包</span>} key="5">
                            <div style={{ padding: 30 }}>
                                <h1>招聘外包</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={10}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >提高招聘质量</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >缩短填补职位空缺的时间</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >改善整个行政流程</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>管理核心业务指标的汇报以及削减总体成本</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={14}>
                                        <div >
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WSyRjf.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane tab={<span onMouseEnter={() => { this.setState({ activeKey: "6" }) }}>劳务派遣</span>} key="6">
                            <div style={{ padding: 30 }}>
                                <h1>劳务派遣</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={10}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >降低招工费用</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >减少人员储备</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >节省人工成本</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>降低管理成本</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={14}>
                                        <div >
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WSyVts.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                        <TabPane tab={<span onMouseEnter={() => { this.setState({ activeKey: "8" }) }}>技术支持</span>} key="8">
                            <div style={{ padding: 30 }}>
                                <h1>技术支持</h1>
                                <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                                <Row>
                                    <Col span={10}>
                                        <QueueAnim>
                                            <ul>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='0'>
                                                    <Texty >人力资源行业相关领技术解决方案</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='1'>
                                                    <Texty >职业技能提升公共服务平台技术对接</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='2'>
                                                    <Texty >爱心公益、志愿者公共服务平台技术对接</Texty>

                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>互联网产品定制化开发</Texty>
                                                </li>
                                                <li style={{ fontSize: 16, paddingTop: 20, paddingBottom: 20 }} key='3'>
                                                    <Texty>项目外包，技术人才外派</Texty>
                                                </li>
                                            </ul>
                                        </QueueAnim>

                                    </Col>
                                    <Col span={14}>
                                        <div >
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WSsoSx.png">
                                            </img>
                                        </div>

                                    </Col>
                                </Row>
                            </div>
                        </TabPane>
                    </Tabs>

                </div>




                <div className='box2'>
                    <h1 style={{ textAlign: 'center' }}>享邦邦互联网产品</h1>
                    <br />
                    <Tabs
                        defaultActiveKey="1"
                        tabPosition='top'
                        size="large"
                        animated={{ inkBar: true, tabPane: true }}
                        tabBarStyle={{ textAlign: 'center' }}
                    >
                        <TabPane
                            tab={
                                <span style={{ paddingRight: '35px' }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/06/23/RuSqLd.png" style={{ width: 30, height: 30 }}></img>
                                    <span style={{ paddingLeft: 15 }}>爱心互助平台</span>
                                </span>
                            }
                            key="1">
                            <Row>
                                <Col span={12}>
                                    <div>
                                        <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnRdYR.png">
                                        </img>
                                    </div>
                                </Col>
                                <Col span={12}>
                                    <div style={{ minHeight: 400 }}>
                                        <div style={{ padding: 50, fontSize: 24, textAlign: 'right' }}>爱心互助平台</div>
                                        <div style={{ paddingLeft: 80, paddingRight: 50, textAlign: 'left' }}>
                                            享邦邦爱心互助平台与志愿者共筑爱心长城，应对一切危难时刻！求助、救援、物品找回信息一键发布；实时更新的互助信息广场，全视角互助信息地图；信息同频，对救助对象进行点对点帮扶；同支援者（团体）、社会各级救助单位建立救援矩阵，齐心协力，风雨同舟！                                        </div>
                                        <div style={{ width: 100, height: 100, float: 'right', paddingTop: 30, marginRight: 50 }}>
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/08/13/fBo48f.jpg"></img>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane
                            tab={
                                <span style={{ paddingRight: '35px' }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/06/23/RuSqLd.png" style={{ width: 30, height: 30 }}></img>
                                    <span style={{ paddingLeft: 15 }}>灵活用工企业端</span>
                                </span>
                            }
                            key="2">
                            <Row>
                                <Col span={12}>
                                    <div>
                                        <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnRBSx.png">
                                        </img>
                                    </div>
                                </Col>
                                <Col span={12}>
                                    <div style={{ minHeight: 400 }}>
                                        <div style={{ padding: 50, fontSize: 24, textAlign: 'right' }}>灵活用工企业端</div>
                                        <div style={{ paddingLeft: 80, paddingRight: 50, textAlign: 'left' }}>
                                            响帮帮灵活用工让企业灵活招聘更简单，让成本降至冰点！海量求职者覆盖社区1000余个、大学50余所以及郑州市所有热门商圈，定位精准、实施推送，可发布次单、时单、日单、月单或长期招聘，满足企业对灵活用工、兼职招聘的一切需求！
                                        </div>
                                        <div style={{ width: 100, height: 100, float: 'right', paddingTop: 30, marginRight: 50 }}>
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnRwf1.jpg"></img>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane
                            tab={
                                <span style={{ paddingRight: '35px' }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/06/23/RuSqLd.png" style={{ width: 30, height: 30 }}></img>
                                    <span style={{ paddingLeft: 15 }}>灵活用工用户端</span>
                                </span>
                            }
                            key="3">
                            <Row>
                                <Col span={12}>
                                    <div>
                                        <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnRDl6.png">
                                        </img>
                                    </div>
                                </Col>
                                <Col span={12}>
                                    <div style={{ minHeight: 400 }}>
                                        <div style={{ padding: 50, fontSize: 24, textAlign: 'right' }}>灵活用工用户端</div>
                                        <div style={{ paddingLeft: 80, paddingRight: 50, textAlign: 'left' }}>
                                            已认证企业200余家、小商户2000余家，平均每日发布发岗位500多个。根据求职者的接活设置智能匹配最符合要求的就业信息，从面试到上岗再到用工打卡、工资结算可全流程回溯，全面保障求职者的权益，让灵活就业、自主工作不再是梦想！                                        </div>
                                        <div style={{ width: 100, height: 100, float: 'right', paddingTop: 30, marginRight: 50 }}>
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnRr6K.jpg"></img>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane
                            tab={
                                <span style={{ paddingRight: '35px' }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnR8yT.png" style={{ width: 30, height: 30 }}></img>
                                    <span style={{ paddingLeft: 15 }}>智慧培训</span>
                                </span>
                            }
                            key="4">
                            <Row>
                                <Col span={12}>
                                    <div>
                                        <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnRNTJ.png">
                                        </img>
                                    </div>
                                </Col>
                                <Col span={12}>
                                    <div style={{ minHeight: 400 }}>
                                        <div style={{ padding: 50, fontSize: 24, textAlign: 'right' }}>智慧培训</div>
                                        <div style={{ paddingLeft: 80, paddingRight: 50, textAlign: 'left' }}>
                                            享邦邦智慧培训是人社厅认证的优质职业教育在线培训平台，课程内容覆盖当下各种热门行业，培训灵活自由，充分利用碎片化时间。培训合格颁发人社厅部门认证证书，根据职业资格认证水平还能拿到多级现金补贴，同时进入响帮帮灵活用工人才库，高薪工作轻松到手！                                        </div>
                                        <div style={{ width: 100, height: 100, float: 'right', paddingTop: 30, marginRight: 50 }}>
                                            <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnRak9.jpg"></img>
                                        </div>
                                    </div>
                                </Col>
                            </Row>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        )
    }
}